<template>
  <div class="img-list-upload">
    <el-upload
      action=""
      :accept="accept"
      list-type="picture-card"
      :file-list="fileList"
      :multiple="true"
      :show-file-list="true"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :http-request="uploads"
      :limit="limit"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img width="100%" height="100%"
             class="el-upload-list__item-thumbnail"
             :src="file.imageUrl||defaultGoodsImg" alt="上传中...">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handleMoveLeft(file)">
            <i class="el-icon-arrow-left"></i>
          </span>
          <span class="el-upload-list__item-preview" @click="handlePreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
            <span class="el-upload-list__item-preview" @click="handleMoveRight(file)">
            <i class="el-icon-arrow-right"></i>
          </span>
      </span>
      </div>
    </el-upload>
    <slot></slot>
    <el-dialog title="查看" :visible.sync="dialogVisible" width="60%">
      <el-carousel  ref="carousel"  arrow="hover" height='500px' indicator-position="outside" :autoplay="false" :initial-index="activeIndex" class="loop-image">
        <el-carousel-item v-for="(item,i) in fileList" :key="i">
          <div class="image" :style="{backgroundImage:`url(${item.imageUrl})`}"></div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<!--图片上传组件-->
<script>
  import qnUpload from '@/utils/qiniu'
  import defaultGoodsImg from '@/assets/nopic.png'

  export default {
    name: 'ImgUpload',
    props: {
      // action:'',
      fileList: {
        type: Array,
      },
      limit: {
        type: Number,
        default: 5
      },
      accept: {
        type: String,
        default: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP,'
      },
      upload: Function,
      uploadFrom: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dialogVisible: false,
        activeIndex:0,
        defaultGoodsImg
      }
    },
    watch: {

    },

    methods: {
      handlePreview(file){
        this.dialogVisible = true
        let viewItem = this.findItem(file)
        this.activeIndex = viewItem.index
        this.$nextTick(()=>{
          this.$refs.carousel.setActiveItem(viewItem.index)
        })
      },
      handleExceed(fileList) {

        if(this.fileList.length+fileList.length>5)return this.$message.error(`最多允许上传${this.limit}张`)

      },
      beforeUpload(file) {
        const _self = this
        const _URL = window.URL || window.webkitURL
        return new Promise((resolve, reject) => {
          const img = new Image()
          img.src = _URL.createObjectURL(file)
          img.onload = function () {
            let obj = {
              hasSuccess: false,
              uid: file.uid,
              width: this.width,
              height: this.height,
              sort:'',
              type: 0
            }
            _self.fileList.push(obj)
            _self.$emit('upload-callback', _self.fileList, 'beforeUpload')
          }
          resolve(true)
        })
      },
      handleRemove(file) {
        const uid = file.uid
        let fileList = this.fileList
        for (let i = 0, len = fileList.length; i < len; i++) {
          if (fileList[i].uid === uid) {
            this.fileList.splice(i, 1)
            this.$emit('upload-callback', this.fileList, 'delete')
            return
          }
        }
      },
      findItem(file) {
        const uid = file.uid
        let fileList = this.fileList,findItem={}
        fileList.map((listOne, i) => {
          if (listOne.uid === uid) {
            findItem['item'] = listOne
            findItem['index'] = i
            return
          }
        })
        return findItem
      },
      handleMoveLeft(file) {
        let moveItem = this.findItem(file)
        if (moveItem.index === 0) return false
        this.fileList.splice(moveItem.index, 1)
        this.fileList.splice(moveItem.index - 1, 0, moveItem.item)
        this.$emit('upload-callback', this.fileList, 'moveLeft')
      },
      handleMoveRight(file) {
        let moveItem = this.findItem(file)
        if (moveItem.index === this.fileList.length-1) return false
        this.fileList.splice(moveItem.index, 1)
        this.fileList.splice(moveItem.index + 1, 0, moveItem.item)
        this.$emit('upload-callback', this.fileList, 'moveRight')
      },
      checkAllSuccess() {
        return this.fileList.every(item => item.hasSuccess)
      },
      handleError(file){
        let deleteItem = this.findItem(file)
        this.fileList.splice(deleteItem.index,1)
        this.$emit('upload-callback', this.fileList, 'errordDelete')
      },
      handleSuccess(url, file) {
        let changeItem = this.findItem(file)
        let changeOne = this.fileList[changeItem.index]
        changeOne.imageUrl = url
        changeOne.hasSuccess = true
         this.$set(this.fileList,changeItem.index,changeOne)
        this.$emit('upload-callback', this.fileList, 'add')
        //
      },
      uploads(file) {
        const upload = {
          mediaType:'image',
          value:file,
          uploadTo:this.uploadFrom,
          uploadType:'normal',
          callback:{
            success:this.handleSuccess,
            error:this.handleError
          }
        }
        qnUpload.upload(upload)
      }
    },

  }
</script>
<style lang="scss" scoped>
  .loop-image{
    text-align: center;

      .image {
        height: 100%;
        width: 100%;
        background-pageSize: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
      }

  }
</style>
<style lang="scss">
  .img-list-upload {
    .el-upload-list__item-status-label {
      display: none !important;
    }

    .el-upload-list--picture-card .el-upload-list__item,
    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 106px;
    }

    .el-upload-list--picture-card .el-upload-list__item-actions span + span {
      margin-left: 0;
    }
  }

</style>
